import React,{Component} from 'react'
import {Menu,Icon,Button,Modal} from 'antd'
import {inject, observer} from 'mobx-react'
import { FileAddOutlined, FolderAddOutlined } from '@ant-design/icons';

const {SubMenu} = Menu
/**
 * 名称：标签菜单页面栏
 * 描述：标签菜单页面栏
 * 调用：创建活动、标签中心
 * 输入：tagStore 标签相关存储
 * 时间：20220403
 */
 @inject('tagStore')
 @observer
class AssetTagMenu  extends Component{
    constructor(props){
        super(props)
        const {tagStore,showAllStatus} = props
        this.state = {modalInvalid:false}
        
        if (showAllStatus){
            tagStore.apiTagMenuSourceAll()
        } else {
            tagStore.apiTagMenuSourceOn()
        }
        
        
    }
    componentDidMount(){
        const {tagStore,onTagSelect} = this.props
        const {tagMenuSource} = tagStore
        
        onTagSelect(tagMenuSource[0] && tagMenuSource[0].children[0] && tagMenuSource[0].children[0].key)
    }
    /**
     * 根据菜单数据生成菜单组件
     * @param {*} tagMenuSource 
     * @returns 
     */
    getMenuNodes = (tagMenuSource)=>{
        
        return tagMenuSource.map( item => {
            if (!item.children){
                return (
                    <Menu.Item key={item.key}>
                        <span>
                            <Icon type={item.icon}/>
                            <span>{item.title}</span>
                        </span>
                    </Menu.Item>
                )
            }
            else{
                
                return (
                <SubMenu
                   key={item.key}
                   title={
                       <span>
                           <Icon type={item.icon}/>
                           <span>{item.title}</span>
                       </span>
                   }
               >
                   {this.getMenuNodes(item.children)}
                </SubMenu>)
            }
            
        })

    }
    render(){
        const {tagStore,onTagSelect} = this.props
        const {tagMenuSource} = tagStore
        const menuNodes = this.getMenuNodes(tagMenuSource)
        return (
                

                <Menu
                 mode="inline"
                 style={{height:"100%"}}
                 defaultSelectedKeys={tagMenuSource && tagMenuSource[0] && tagMenuSource[0].children[0] && [ tagMenuSource[0].children[0].key]}
                 defaultOpenKeys={tagMenuSource && tagMenuSource[0] && [tagMenuSource[0].key]}
                 onClick={(item)=> onTagSelect(item.key)}
                >
                   {menuNodes}

                </Menu>
                
        )
    }

    

}

export default AssetTagMenu